<template>
  <div class="menu-management">
    <!-- 顶部操作栏 -->
    <div class="top-action-bar">
      <el-form :inline="true" class="search-form">
        <el-form-item label="菜单名称：">
          <el-input v-model="searchName" placeholder="请输入" style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item label="菜单状态：">
          <el-select v-model="searchStatus" placeholder="所有" style="width: 120px">
            <el-option label="所有" value=""></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮组 -->
    <div class="action-buttons">
      <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="filteredData"
      style="width: 100%; margin-top: 15px"
      class="custom-table"
    >
      <el-table-column prop="name" label="菜单名称" width="150"></el-table-column>
      <el-table-column prop="order" label="排序" width="80"></el-table-column>
      <el-table-column prop="url" label="请求地址" width="100">
        <template>#</template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="100">
        <template>
          <el-tag type="info">目录</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="visible" label="可见" width="100">
        <template>
          <el-tag type="warning">提示</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="permission" label="权限标识" width="100">
        <template>
          <el-tag type="danger">取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template v-slot="{ row }">
          <el-button type="text" size="small" @click="edit(row)">编辑</el-button>
          <el-button type="text" size="small" style="color: #F56C6C" @click="showDeleteConfirm(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="editDialogVisible" title="编辑菜单">
      <el-form :model="editForm" ref="editFormRef">
        <el-form-item label="菜单名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model.number="editForm.order"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog :visible.sync="addDialogVisible" title="新增菜单">
      <el-form :model="addForm" ref="addFormRef">
        <el-form-item label="菜单名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model.number="addForm.order"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAdd">确定</el-button>
      </div>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog :visible.sync="deleteDialogVisible" title="确认删除">
      <span>确定要删除该菜单吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '信息管理', order: 0 },
        { name: '学生选择', order: 1 },
        { name: '生产实习', order: 1 },
        { name: '顶岗实习', order: 1 },
        { name: '成绩管理', order: 2 },
        { name: '实习管理', order: 2 },
        { name: '分享', order: 3 },
        { name: '系统管理', order: 4 },
        { name: '系统工具', order: 4 },
        { name: '系统监控', order: 5 }
      ],
      searchName: '',
      searchStatus: '',
      filteredData: [],
      editDialogVisible: false,
      addDialogVisible: false,
      editForm: {},
      addForm: { name: '', order: null },
      editIndex: -1,
      deleteDialogVisible: false,
      deleteRow: {}
    };
  },
  created() {
    this.filteredData = this.tableData;
  },
  methods: {
    search() {
      this.filteredData = this.tableData.filter(item => {
        return (
          (this.searchName === '' || item.name.includes(this.searchName)) &&
          (this.searchStatus === '' || item.status === this.searchStatus)
        );
      });
    },
    reset() {
      this.searchName = '';
      this.searchStatus = '';
      this.filteredData = this.tableData;
    },
    showAddDialog() {
      this.addDialogVisible = true;
      this.addForm = { name: '', order: null };
    },
    saveAdd() {
      this.tableData.push({ ...this.addForm });
      this.addDialogVisible = false;
      this.search(); // 更新过滤后的数据
    },
    edit(row) {
      this.editDialogVisible = true;
      this.editForm = { ...row };
      this.editIndex = this.tableData.findIndex(item => item.name === row.name);
    },
    saveEdit() {
      this.tableData.splice(this.editIndex, 1, this.editForm);
      this.editDialogVisible = false;
      this.search(); // 更新过滤后的数据
    },
    showDeleteConfirm(row) {
      this.deleteDialogVisible = true;
      this.deleteRow = row;
    },
    confirmDelete() {
      const index = this.tableData.findIndex(item => item.name === this.deleteRow.name);
      this.tableData.splice(index, 1);
      this.deleteDialogVisible = false;
      this.search(); // 更新过滤后的数据
    }
  }
};
</script>

<style scoped>
.menu-management {
  padding: 20px;
  background: #fff;
}

.top-action-bar {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.search-form {
  display: flex;
  align-items: center;
}

.action-buttons {
  margin: 15px 0;
}

.el-form-item {
  margin-bottom: 0;
}

.custom-table {
  margin-top: 15px;
}

.el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}

.el-button--text {
  padding: 0 5px;
}
</style>